<template>
	<div style="margin-top: 1.25rem;text-align: left;">
		<!-- <van-skeleton title  :row="3" :loading="loading">
			
		</van-skeleton> -->
		<van-row style="width: 100vw;height: 7vh;">
			<van-col span="18">
				<van-icon name="arrow-left" style="font-weight: bolder;margin-top: 5px;margin-right: 60vw;" size="25"
					@click="back" />
			</van-col>
			<van-col span="3">
				<!-- 分享样式 -->
				<van-icon name="weapp-nav" style="font-weight: bolder;margin-top: 5px;" size="25"
					@click="showShare = true" />
			</van-col>
			<van-col span="3">
				<van-icon name="comment-o" style="font-weight: bolder;margin-top: 5px;" size="25" />
			</van-col>
		</van-row>
		<van-swipe height="35vh" @change="onChange">
			<van-swipe-item style="height: 45vh;" v-for="(item,index) in depositImg">
				<van-image width="100%" height="100%" :lazy-load="true" :src="http+item.image_url" />
			</van-swipe-item>
			<template #indicator>
				<div class="custom-indicator">{{ current + 1 }}/{{length}}</div>
			</template>
		</van-swipe>

		<van-row style="margin-top: 20px;width: 95%;margin-left: 3%;">
			<van-col span="4">
				<h1 style="color: #FF0000;font-size: 1.5625rem;">￥{{depositList.shop_price}}</h1>
			</van-col>
			<van-col span="4" offset="10">
				<van-row>
					<van-col span="24" style="text-align: center;">
						<van-icon name="success" size="25" />
					</van-col>
					<van-col span="24">
						降价通知
					</van-col>
				</van-row>
			</van-col>
			<van-col span="4" offset="1">
				<van-row>
					<van-col span="24" style="margin-left: 17px;">
						<div v-if="pitch" @click="pitch_on">
							<van-icon name="star-o" size="25" />
						</div>
						<div v-else @click="pitch_on">
							<van-image width="30" height="21"
								src="http://img2.3png.com/aa40d84030fc8347d9b6fd96a592f7c977e7.png" />
						</div>
					</van-col>
					<van-col span="24" style="margin-left: 0.9375rem;">
						收藏
					</van-col>
				</van-row>
			</van-col>
		</van-row>

		<van-row style="width: 95%;height: 6vh; margin-left: 3%;margin-top: 10px;">
			<van-col span="24" style="font-weight: 600;font-size: 20px;line-height: 30px;">
				{{depositList.goods_name}}
			</van-col>
		</van-row>
		<van-row style="width: 95%;height: 6vh; margin-left: 3%;margin-top: 20px;">
			<van-col span="24" style="font-weight: 600;">
				·M1芯片·轻薄便携·超长续航
			</van-col>
		</van-row>
		<van-row style="width: 95%;margin-left: 3%;color: #656;">
			<van-col span="6">快递：免运费</van-col>
			<van-col span="4" offset="14">上海</van-col>
		</van-row>

		<van-row style="background-color: #F6F6F6;height: 8.32rem;margin-top: 0.625rem;">
			<van-col span="24">
				<van-row style="margin-top: 0.9375rem;background-color: #fff;height: 3.125rem;">
					<van-col span="3" style="margin-left: 3%;">保障</van-col>
					<van-col span="17">
						<van-row>
							<van-col span="24">付款后3大内友货</van-col>
							<van-col span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
								假一赔四·极速退款·七天无理由退换</van-col>
						</van-row>
					</van-col>
					<van-col span="3" style="font-size: 20px;line-height: 55px;">
						<van-icon name="arrow" />
					</van-col>
				</van-row>
				<van-row style="margin-top: 0.9375rem;background-color: #fff;height: 2.5rem;line-height: 2.5rem;">
					<van-col span="3" style="margin-left: 3%;">选择</van-col>
					<van-col span="17">
						<van-row>
							<van-col span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
								配送至:地址,选择网络类型,机身颜色,存储...</van-col>
						</van-row>
					</van-col>
					<van-col span="3" style="font-size: 20px;">
						<van-icon name="arrow" />
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<van-row>
			<van-col span="24" class="buttom_img">
				<div v-html="message">
					<!-- {{depositList.goods_content}} -->
				</div>
			</van-col>
		</van-row>

		<van-row style="height: 3.125rem;">
			<van-col span="24"></van-col>
		</van-row>
		<div id="" style="width: 100%;">
			<van-goods-action>
				<van-goods-action-icon icon="chat-o" text="客服" />
				<van-goods-action-icon icon="shop-o" text="店铺" />
				<van-goods-action-button color="#cfb7d5" type="warning" text="加入购物车" @click="click_add" />
				<van-goods-action-button color="red" type="danger" text="立即购买" @click="GenerateOrder"/>
			</van-goods-action>
		</div>
		<van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		Toast
	} from 'vant';
	import { Notify } from 'vant';
	export default {
		components: {
			[Notify.Component.name]: Notify.Component,
		},
		data() {
			return {
				json: [],
				pitch: true,
				depositImg: [],
				current: 0, //轮播图
				http: 'https://img.9lele.com',
				length: 0,
				depositList: [],
				message: '',
				showShare: false,
				options: [{
						name: '微信',
						icon: 'wechat'
					},
					{
						name: '微博',
						icon: 'weibo'
					},
					{
						name: '复制链接',
						icon: 'link'
					},
					{
						name: '分享海报',
						icon: 'poster'
					},
					{
						name: '二维码',
						icon: 'qrcode'
					},
				],
			}
		},
		computed: {
			...mapGetters([
				'particulars',
				'collectList'
			])
		},
		created() {
			let id = this.$route.query.id
			this.$nextTick(function() {
				this.$store.dispatch("user/vuexparticulars", id)
					.then(e => {
						console.log(e)
						this.depositImg = e.data.data.imgList
						this.length = e.data.data.imgList.length
						this.collectList.map((v,k)=>{
							console.log(11)
							if(v.goods_id == this.depositList.goods_id){
								this.pitch = false
							}
						})
						this.depositList = e.data.data
						this.message = e.data.data.goods_content
						this.click1()
					})
			})
			console.log(this.$route.query.id * 1)
			
		},
		methods: {
			// 生成订单
			GenerateOrder(){
				this.$router.push('/ConfirmOrder')
			},
			back() {
				this.$router.push({
					path: '/'
				})
			},
			// 轮播图
			onChange(index) {
				this.current = index;
			},
			click1() {
				this.message = this.escapeHtml(this.message)
			},
			escapeHtml(str) {
				var arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			click_add() {
				let user = JSON.parse(localStorage.getItem('user')).member_id
				console.log(user, 'user')
				let data = this.depositList
				console.log(data, 'data111')
				data.member_id = user //add
				this.$nextTick(function() {
					this.$store.dispatch("user/vuexShoppingAdd", data)
						.then(e => {
							console.log(e, '添加')
							if (e.data.data.cart_id != '') {
								Toast.success('添加成功');
							} else {
								Toast.fail('添加失败');
							}
						})
				})
			},
			// 分享
			onSelect(option) {
				Toast(option.name);
				this.showShare = false;
			},
			// 收藏
			pitch_on() {
				this.pitch = !this.pitch
				let collectArr = this.collectList
				console.log(this.collectList,'llll')
				let fiag = 0;
				collectArr.map((v,k)=>{
					if(v.goods_id==this.depositList.goods_id){
						// 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。
						collectArr.splice(k,1);
						this.$store.dispatch('add_delete/DelCollect',collectArr)
						fiag = 1
					}
				})
				if(fiag != 1){
					this.$store.dispatch('add_delete/AddCollect',this.depositList)
				}
			}
			
			// 浏览器追加
			// pitch_on() {
			// 	this.pitch = !this.pitch
			// 	let img = this.depositList.original_img
			// 	let name = this.depositList.goods_name
			// 	let price = this.depositList.shop_price
			// 	let json = {
			// 		img: img,
			// 		name: name,
			// 		price: price
			// 	}
			// 	console.log(JSON.parse(localStorage.getItem('collect')), '收藏')
			// 	let user = JSON.parse(localStorage.getItem('user'))
			// 	console.log(user)
			// 	let collect = JSON.parse(localStorage.getItem('collect'+user.member_id))
			// 	let a =[];
			// 	console.log(user,'user')
			// 	if(user==''){
			// 		Notify('请登录');
			// 	}
			// 	if (collect == null) {
					
			// 		a.push(json) 
			// 		localStorage.setItem('collect'+user.member_id, JSON.stringify(a))
			// 	} else {
			// 		a = JSON.parse(localStorage.getItem('collect'+user.member_id))
					
			// 		console.log(a,'000')
			// 		a.push(json)
			// 		localStorage.setItem('collect'+user.member_id, JSON.stringify(a))
			// 	}
			// }
		}
	}
</script>
<!-- 
 axis封装 配置了跨域  vuex模块化
 -->
<style>
	.van-swipe .van-swipe-item {
		background-color: #FFFFFF;
	}

	.buttom_img {
		font-size: 0.3rem;
		text-align: left;
	}

	.buttom_img img {
		width: 100%;
	}
</style>
